$(function(){

    var $btn_new = $('#btn-new'),
        $add_user_form = $('#add-user-form'),
        $edit_user_form = $('#edit-user-form'),
        $info_user_form = $('#info-user-form'),
        $table = $('#user-table'),
        $status_comboBox = $('#status-comboBox');


    //点击重置按钮显示所有用户
    $(document).delegate('#btn-reset','click',function () {
        var $tr_user_data    = $('tr.user-data');
        //下拉列表选择全部
        $status_comboBox.val('全部');
        $('#username-search-input').val('');
        $('#userId-search-input').val('');
        $tr_user_data.show();
    })

    //根据身份筛选用户
    $(document).delegate('#status-comboBox','change',function () {
        $('#username-search-input').val('');
        $('#userId-search-input').val('');
        var $tr_user_data    = $('tr.user-data');
        if($status_comboBox.val() === '用户'){
            console.log('选择用户');
            //筛选显示身份为用户的
            $tr_user_data.hide().filter(":contains('用户')").show();
        }else if($status_comboBox.val() === '管理员'){
            //筛选身份为管理员的
            $tr_user_data.hide().filter(":contains('管理员')").show();
        }else{
            //全显示
            $tr_user_data.show();

        }
    });

    //添加用户
    $btn_new.on('click',function () {
        $btn_new.removeClass('gray');
        $add_user_form.show();
    })
    //确认添加该用户
    $('#confirm-add-btn').on('click',function () {
        confirm("添加用户成功！")
    })

    //关闭添加用户的form表单
    $('#close-add-form-btn').on('click',function (){
        $add_user_form.hide();
        $btn_new.addClass('gray');
    });

    //编辑用户
    $(document).delegate('#edit-user-btn','click',function () {
        $edit_user_form.show();
        $(this).addClass('gray');
        //将选中的用户信息显示在form表单中
        var userId = $(this).closest('tr').find('td:eq(0)').text(),
            username = $(this).closest('tr').find('td:eq(1)').text(),
            password = $(this).closest('tr').find('td:eq(2)').text(),
            email = $(this).closest('tr').find('td:eq(3)').text(),
            age = $(this).closest('tr').find('td:eq(4)').text(),
            status = $(this).closest('tr').find('td:eq(5)').text();
        status = (status === '管理员')?1:0;
        console.log(username);

        $('#edit-userId').val(userId);
        $('#edit-username').val(username);
        $('#edit-password').val(password);
        $('#edit-email').val(email);
        $('#edit-age').val(age);
        if(status===1){
            $('#edit-manager-radio').attr('checked',true);
        }else{
            $('#edit-user-radio').attr('checked',true);
        }
    })
    //点击确认修改按钮
    $(document).delegate('#confirm-edit-btn','click',function (){
        var result = confirm('确认提交修改？');
        if(result){
            //数据库中编辑用户
            $edit_user_form.hide();
            $('.action-btn').removeClass('gray');//把操作中的所有按钮都移除gray的类
        }
    });
    //关闭编辑用户的界面(动态绑定)
    $(document).delegate('#close-edit-form-btn','click',function () {
        $edit_user_form.hide();
        $('.action-btn').removeClass('gray');//把操作中的所有按钮都移除gray的类
    })

    //删除用户
    $(document).delegate('#delete-user-btn','click',function () {
        const result = confirm('确认删除用户？');
        if(result){
            //数据库中删除用户
        }else{
            // confirm('删除失败，请重试');
        }
    })

    //用户详情
    $table.delegate('#user-info-btn','click',function () {
        $info_user_form.show();
        $(this).addClass('gray');
        //调用数据库将选中的用户account信息显示在form表单中
    })
    //点击编辑用户详情的表单
    $(document).delegate('#edit-info-btn','click',function () {
        //所有input输入框可选中
        $('.info-input').removeAttr('readonly');
        //编辑按钮变黄
        $(this).removeClass('gray');
        //保存按钮可选中
        $('#confirm-info-btn').removeClass('disable');
    })
    //点击保存用户详情页面的更改按钮
    $(document).delegate('#confirm-info-btn','click',function () {
        //编辑按钮变灰
        $('#edit-info-btn').addClass('gray');
        //TODO:数据库中更新account数据
        //input输入框改为只读
        $('.info-input').attr('readonly');
        //弹出保存成功的提示
        confirm('用户信息更新成功！');
    })
    //关闭详情表单
    $(document).delegate('#close-info-form-btn','click',function () {
        $info_user_form.hide();
        $('.action-btn').removeClass('gray');//把操作中的所有按钮都移除gray的类
    })


    var rowsLength = $table[0].rows.length;
    //根据用户名搜索用户
    $(document).delegate('#username-search-input','input',function (){
        var key    = $(this).val();
        var $table = $('#user-table');
        if(key===''||key===null){
            $status_comboBox.val('全部');
        }
        setTimeout(function(){
            var searchCol = 1;
            for(var i=1;i<=rowsLength;i++){
                var row = $table[0].rows[i];
                if (row) { // 检查行是否已定义
                    var searchText = row.cells[searchCol].textContent;
                    // console.log(searchText);
                    if(searchText.match(key)){
                        row.style.display='';//显示行操作
                    }else{
                        row.style.display='none';//隐藏行操作
                    }
                }
            }
        },200)
    })

    //根据用户ID搜索用户
    $(document).delegate('#userId-search-input','input',function (){
        var key    = $(this).val();
        var $table = $('#user-table');
        if(key===''||key===null){
            $status_comboBox.val('全部');
        }
        setTimeout(function(){
            var rowsLength = $table[0].rows.length;
            var searchCol = 0;
            for(var i=1;i<=rowsLength;i++){
                var row = $table[0].rows[i];
                if (row) { // 检查行是否已定义
                    var searchText = row.cells[searchCol].textContent;
                    // console.log(searchText);
                    if(searchText.match(key)){
                        row.style.display='';//显示行操作
                    }else{
                        row.style.display='none';//隐藏行操作
                    }
                }
            }
        },200)
    })

})